<template>
    <circle 
        :cx="x" 
        :cy="y" 
        :r="r"
        :style="customStyle" >
    </circle>
</template>

<script>
export default {
    name: 'VoGridCircle',
    props: {
        x: {
            type: [Number, String],
            default: '50%'
        },
        y: {
            type: [Number, String],
            default: '50%'
        },
        r: {
            type: [Number, String],
            default: 0
        },
        active: Boolean,
        fill: {
            type: String,
            default: '#EBEEF5'
        },
        activeFill: {
            type: String,
            default: '#EBEEF5'
        },
        stroke: {
            type: String,
            default: '#DCDFE6'
        },
        strokeWidth: {
            type: Number,
            default: 4
        },
        activeStroke: {
            type: String,
            default: '#E6A23C'
        },
        activeStrokeWidth: {
            type: Number,
            default: 4
        }
    },
    computed: {
        customStyle() {
            const { active, fill, activeFill, stroke, activeStroke, strokeWidth, activeStrokeWidth } = this;
            return {
                fill: active ? activeFill : fill,
                stroke: active ? activeStroke : stroke,
                strokeWidth: active ? activeStrokeWidth : strokeWidth,
                transition: '0.2s'
            }
        }
    }
}
</script>